<template>
	<div class="tmpl">
		<!-- 1.0 轮播使用的mint-ui中的swipe组件 -->
		<mt-swipe :auto="2000">
		  <mt-swipe-item v-for="item in swipeList">
		  <a :href="item.url">
		  	<img :src="item.img" alt="">
		  </a>
		  </mt-swipe-item>	 
		</mt-swipe>

		<!-- 2.0 9宫格导航区域 使用的mui中的9宫格样式 -->
		<div class="mui-content">
		 <ul class="mui-table-view mui-grid-view mui-grid-9">
		            
					<li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">机票</div></a></li>

		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">酒店客栈</div></a></li>

		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-phone"></span>
		                    <div class="mui-media-body">火车票</div></a></li>

		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-gear"></span>
		                    <div class="mui-media-body">自由行</div></a></li>

		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-info"></span>
		                    <div class="mui-media-body">门票</div></a></li>
		            
		           <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">机票</div></a></li>

		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">酒店客栈</div></a></li>

		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-phone"></span>
		                    <div class="mui-media-body">火车票</div></a></li>

		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-gear"></span>
		                    <div class="mui-media-body">自由行</div></a></li>

		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-info"></span>
		                    <div class="mui-media-body">门票</div></a></li>
		                     
		           <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-home"></span>
		                    <div class="mui-media-body">机票</div></a></li>

		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-search"></span>
		                    <div class="mui-media-body">酒店客栈</div></a></li>

		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-phone"></span>
		                    <div class="mui-media-body">火车票</div></a></li>

		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-gear"></span>
		                    <div class="mui-media-body">自由行</div></a></li>

		            <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-info"></span>
		                    <div class="mui-media-body">门票</div></a></li>

		           <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
		                    <span class="mui-icon mui-icon-more"></span>
		                    <div class="mui-media-body">更多</div></a></li>
		        </ul> 
		        </div>
	</div>
</template>

<script>

export default{
	data(){
		return {
			swipeList:[
					// {
					// url: "http://www.itcast.cn/subject/phoneweb/index.html",
					// img: "http://ofv795nmp.bkt.clouddn.com/vuelogobanner1.jpg"
					// }
			]
		}
	},
	methods:{
		// 1.0 获取轮播图数据
		getimglist(){
			this.$http.get('../data/swipe.json')
			.then(res=>{
				// 将数据赋值给swipeList属性，自动导致v-for重新执行
				this.swipeList = res.body.message;
			});
		}
	},
	created(){
		//当进入Home.vue组件的时候请求数据
		this.getimglist();
	}
}
	
</script>

<style scoped>
	.mint-swipe{
		height: 200px;
	}

	.mint-swipe img{
		width: 100%;
	}

	.mint-swipe-item{
		
		color:white;
	}
		.mui-content ul{
		background-color: #fff;
	}

	mt-swipe{
		margin-top:-20px;
	}

.mui-grid-view.mui-grid-9 .mui-table-view-cell{
	border-right:0;
	border-bottom:0;
}
.mui-icon-home,
.mui-icon-email,
.mui-icon-gear,
.mui-icon-info,
.mui-icon-search,
.mui-icon-phone{
	display: block;
	width: 60px;
	height: 50px;
	background-repeat: round;
	margin-left: 18px;
}

.mui-icon-home{
	background-image: url(../../statics/imgs/feiji.png);
}
.mui-icon-search{
background-image: url(../../statics/imgs/jiudian.png);
}
.mui-icon-phone{
background-image: url(../../statics/imgs/menpiao.png);
}

.mui-icon-gear{
background-image: url(../../statics/imgs/zhoubianyou.png);
}
.mui-icon-info{
background-image: url(../../statics/imgs/dujia.png);
}


.mui-icon-home:before,
.mui-icon-email:before,
.mui-icon-info:before,
.mui-icon-gear:before,
.mui-icon-search:before,
.mui-icon-phone:before{
	content: ''
}
</style>